<!--  -->
<template>
  <div class="page-wrap cop">
    <div class="cop-item">
      <div class="problem-title problem-title-a">整改问题</div>
      <ul class="problem-list">
        <li>{{ rectifyProblem.content }}</li>
        <!-- <li>问题级别：{{ rectifyProblem.rank }}</li> -->
        <li>问题提交时间：{{ rectifyProblem.createTime }}</li>
        <li>问题图片：
          <div class="problem-list-img-list">
            <van-image v-for="(item, index) in rectifyProblem.urlList" :key="index" :src="item" class="problem-list-img"
              @click="showPreview(rectifyProblem.urlList)">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </div>
        </li>
        <!-- color="linear-gradient(to right, #f594cc, #f840a5)"  -->
        <li>整改人：{{ rectifyProblem.corrector }}</li>
        <li>责任人确认：{{ rectifyProblem.rectifyPeople }}</li>
        <li class="problem-btn">
          <van-button v-if="!taskRequireShow" plain type="info" @click="openDialog(1)"
            class="problem-btn-item">任务委派</van-button>
          <van-button v-if="!upRequireShow" :disabled="upRequireHide" color="linear-gradient(to right, #f594cc, #f840a5)"
            type="info" @click="submitTop()" class="problem-btn-item">{{ text }}</van-button>
        </li>
      </ul>
    </div>
    <div class="cop-item" v-if="followUp&&followUp.length>0">
      <div class="problem-title problem-title-b">沟通与跟进</div>
      <div class="problem-list">
        <van-list v-if="followUp && followUp != null && followUp.length">
          <van-cell v-for="(item, index) in followUp" :key="index">
            <p>{{ item.talkPeople }}</p>
            <van-list v-if="item.messageDataBOList && item.messageDataBOList != null && item.messageDataBOList.length">
              <van-cell v-for="(items, indexs) in item.messageDataBOList" :key="indexs">
                <span v-if="items.type == 'text'">{{ items.message }}</span>
                <van-image v-else
                  :src="`https://qccp-wapp.haid.com.cn/api/getMessageImg?messageId=` + items.messageId + '&fileKey=' + items.fileKey"
                  class="problem-list-img" @click="showPreview(rectifyProblem.urlList)">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
              </van-cell>
            </van-list>
          </van-cell>
        </van-list>
        <div v-else>暂无沟通记录</div>
        <van-button  type="info" block @click="showAssign = true" class="assign-btn">指派</van-button>
      </div>
    </div>
    <div v-else style="margin-bottom: 5px;">
      <van-button  type="info" block @click="showAssign = true" class="assign-btn">指派</van-button>
    </div>
    <div class="cop-item" v-if="problemResult&&problemResult.rectifyStatus">
      <div class="problem-title problem-title-c">问题解决结果填报</div>
      <ul class="problem-list">
        <li>整改结论：{{ problemResult.rectifyStatus }}</li>
        <li>整改图片：
          <div class="problem-list-img-list">
            <van-image v-for="(item, index) in problemResult.rectifyUrlList" :key="index" :src="item"
              @click="showPreview(problemResult.rectifyUrlList)" class="problem-list-img">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </div>
        </li>
        <!-- <li>整改状态：{{ problemResult.rectifyStatus }}{{ problemResult.rectifyPeople }}</li>
        <li>核实状态：{{ problemResult.verifyStatus }}{{ problemResult.verifyPeople }}</li> -->
      </ul>
    </div>
    <div class="cop-item" v-if="verifyResult&&verifyResult.verifyStatus">
      <div class="problem-title problem-title-c">结果核实反馈</div>
      <ul class="problem-list">
        <!-- <li>整改图片：
          <div class="problem-list-img-list">
            <van-image v-for="(item, index) in problemResult.rectifyUrlList" :key="index" :src="item"
              @click="showPreview(problemResult.rectifyUrlList)" class="problem-list-img">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </div>
        </li> -->
        <li>核实结论：{{verifyResult.verifyStatus}}</li>
        <li>核实人：{{verifyResult.verifyPeople}}</li>
      </ul>
    </div>
    <van-dialog v-model="show" :title="title" show-cancel-button @confirm="submit">
      <div class="user-list-page">
        <label>姓名：</label>
        <el-select v-model="value" multiple filterable remote reserve-keyword placeholder="请输入名称" loading-text="加载中...."
          @change="selectValue" :remote-method="remoteMethod" collapse-tags :loading="loading">
          <el-option v-for="item in list" :key="item.openId" :label="item.name" :value="item.openId">{{ item.name || ''
          }}<span v-if="item.departmentName || item.employee_no">（&nbsp;{{ item.departmentName || '' }}&nbsp;&nbsp;{{
  item.employee_no || '' }}）</span>

          </el-option>
        </el-select>
      </div>

    </van-dialog>
    <van-dialog v-model="showAssign" title="沟通" show-cancel-button @confirm="submitAssign">
      <div class="user-list-page">
        <div class="user-list-page-item">
          <label class="lable">人员：</label>
          <el-select v-model="valueAssign" multiple filterable remote reserve-keyword placeholder="请输入名称"   value-key="openId"   label="内容"
            class="user-list-page-item-select" loading-text="加载中...." @change="selectValueAssign"
            :remote-method="remoteMethodAssign" collapse-tags :loading="loadingAssign">
            <el-option v-for="item in listAssign" :key="item.openId" :label="item.name" :value="item">{{ item.name
              || ''
            }}<span v-if="item.departmentName || item.employee_no">（&nbsp;{{ item.departmentName || '' }}&nbsp;&nbsp;{{
  item.employee_no || '' }}）</span>
            </el-option>
          </el-select>
        </div>

        <div class="user-list-page-item">
          <label class="lable">内容：</label>
          <van-field class="user-list-page-items"  rows="1" colon v-model="content"
            :autosize="{ maxHeight: 100, minHeight: 80 }"  type="textarea" placeholder="请输入" />
        </div>

      </div>

    </van-dialog>
    <van-image-preview v-model="showImg" :images="icons"></van-image-preview>
  </div>
</template>

<script>
import CONFIG from "@/config/config";
import storage from "@/utils/storage";
import { clientService } from '@/api'

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import { Toast } from 'vant';

Vue.use(ElementUI);
export default {
  name: 'Cop',
  data() {
    return {
      value: [],
      show: false,
      valueAssign: [],
      showAssign: false,
      content: "",
      type: 1,
      title: '',
      objValue: {
        "appToken": "",
        "tableId": "",
        "recordId": "",
        // "messageId": "",
        "openId": "",
        "name": "",
        "relevanceCode": ''
      },
      rectifyProblem: {},//问题整改
      followUp: "",//沟通跟进
      problemResult: {},//整改结果
      verifyResult:{},//确认
      taskRequireShow: true,//委派按钮
      upRequireShow: true,//问题上升
      upRequireHide: false,
      taskRequireHide: false,
      list: [],
      listAssign: [],
      token: '',
      name: '',
      userId: '',
      loading: false,
      loadingAssign: false,
      showImg: false,
      icons: [],
      text: "问题上升",
      rootId:'',
      requestUrl: null,
    };
  },
  //组件
  components: {},
  // activited:function () {
  //   console.log(101)
  // },
  //在实例创建完成后被立即调用
  created: function () {
    this.requestUrl = process.env.VUE_APP_IMAGE_API
    console.log(process.env.VUE_APP_IMAGE_API, '@#@')
    // if (this.$route.params.item) {
    //   storage.setItem(CONFIG.ITEM, JSON.stringify(this.$route.params.item));
    // }
    this.userId = storage.getItem(CONFIG.USERID)
    this.token = storage.getItem(CONFIG.TOKEN)
    this.name = storage.getItem(CONFIG.NAME)
    let data = this.$route.query
    console.log(data)
    this.objValue = {
      "appToken": data.appToken,
      "tableId": data.tableId,
      "recordId": data.recordId,
      //"messageId": data.messageId,
      "openId": this.token,
      "name": this.name,
      "relevanceCode": data.appToken + data.tableId + data.recordId
    }
    this.detail()
  },
  //计算属性  将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
  computed: {},
  //dom 加载完后执行
  mounted() { },
  //方法
  methods: {
    detail() {
      clientService.getImportantAttention(this.objValue).then(json => {
        let res = json.result
        if (!json.error) {
          console.log(json, res)
          this.rectifyProblem = res.rectifyProblem
          this.followUp = res.followUp
          this.problemResult = res.problemResult
          this.verifyResult=res.verifyResult
          this.rootId=res.rootId
          console.log(this.rectifyProblem)
          if (this.rectifyProblem && this.rectifyProblem.urlList) {
            for (let a = 0; a < this.rectifyProblem.urlList.length; a++) {
              this.rectifyProblem.urlList[a] = `https://qccp-wapp.haid.com.cn/api/getImg?url=` + this.rectifyProblem.urlList[a]
            }
          }
          if (this.problemResult && this.problemResult.rectifyUrlList) {
            for (let a = 0; a < this.problemResult.rectifyUrlList.length; a++) {
              this.problemResult.rectifyUrlList[a] = `https://qccp-wapp.haid.com.cn/api/getImg?url=` + this.problemResult.rectifyUrlList[a]
            }
          }

          this.taskRequireShow = res.taskRequireShow ? true : false
          this.upRequireShow = res.upRequireShow ? true : false
        } else {
          if (json.error.code == 1104 ||json.error.code == 99991677) {
            storage.setItem(CONFIG.TOKEN, '');
            this.$router.replace({ name: 'Auth' })
          }
        }
      })
    },
    // async imgUrl(url) {
    //   let obj={
    //     url:url
    //   }
    //   let json = await clientService.getImgList(obj)
    //   let res = json.result
    //   if(!json.error){
    //     console.log(res)
    //   }
    // },
    openDialog(type) {
      this.type = type
      this.show = true
      this.title = type == 1 ? "任务委派" : "问题上升"
    },
    selectValue() {

    },
    selectValueAssign() {

    },
    submit() {
      console.log(this.value)
      if (!this.value.length) {
        Toast('人员不能为空!');
        return
      }
      if (this.type == 1) {
        let obj = {
          "appToken": this.objValue.appToken,
          "tableId": this.objValue.tableId,
          "recordId": this.objValue.recordId,
          "openId": this.value
        }
        clientService.getDelegateTask(obj).then(json => {
          let res = json.result
          this.loading = false;
          if (!json.error) {
            console.log(json, res)
            Toast('任务已委派!');
            this.detail()
            this.value = []
          } else {
            Toast.fail(json.error.msg);
            if (json.error.code == 1104 ||json.error.code == 99991677) {
              storage.setItem(CONFIG.TOKEN, '');
              this.$router.replace({ name: 'Auth' })
            }
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    // 指派
    submitAssign() {
      console.log(this.valueAssign)
      let list=[]

      if (!this.valueAssign.length) {
        Toast('人员不能为空!');
        return
      }
      if (!this.content.length) {
        Toast('人员不能为空!');
        return
      }
      this.valueAssign.forEach(element => {
        let cValue={
          "name": element.name,
          "userId": element.userId
        }
        list.push(cValue)
      });
      let obj = {
        "content": this.content,
        "sender": {
          "name": this.name,
          "userId": this.userId
        },
        "rootId": this.rootId,
        "recordId": this.objValue.recordId,
        "sink": list
      }
      clientService.getAssignList(obj).then(json => {
        let res = json.result
        //this.loading = false;
        if (!json.error) {
          console.log(json, res)
          Toast('发送成功!');
          this.detail()
          this.valueAssign = []
        } else {
          Toast.fail(json.error.msg);
          if (json.error.code == 1104 ||json.error.code == 99991677) {
            storage.setItem(CONFIG.TOKEN, '');
            this.$router.replace({ name: 'Auth' })
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    submitTop() {
      this.upRequireHide = true
      let obj = {
        "appToken": this.objValue.appToken,
        "tableId": this.objValue.tableId,
        "recordId": this.objValue.recordId,
      }
      clientService.getProblemUp(obj).then(json => {
        let res = json.result
        this.loading = false;

        if (!json.error) {
          console.log(json, res)
          this.text = "已上升"
          Toast('问题上升成功!');
          this.upRequireHide = false
          this.detail()
          this.value = []
        } else {
          Toast.fail(json.error.msg);
          if (json.error.code == 250) {
            this.text = "已是最高级"
          } else {
            this.upRequireHide = false
          }
          if (json.error.code == 1104 ||json.error.code == 99991677) {
            storage.setItem(CONFIG.TOKEN, '');
            this.$router.replace({ name: 'Auth' })
          }
        }
      }).catch(err => {
        console.log(err)
        this.upRequireShow = false
      })
    },
    remoteMethod(query) {
      console.log(1)
      if (query !== '') {
        this.loading = true;

        let obj = {
          userName: query,
          openId: this.token
        }
        clientService.getUser(obj).then(json => {
          let res = json.result
          this.loading = false;
          if (!json.error) {
            console.log(json, res)
            this.list = res.userList || []
          } else {
            // Toast.fail(json.error.msg);
            if (json.error.code == 1104||json.error.code == 99991677) {
              storage.setItem(CONFIG.TOKEN, '');
              this.$router.replace({ name: 'Auth' })
            }
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    remoteMethodAssign(query) {
      console.log(1)
      if (query !== '') {
        this.loadingAssign = true;

        let obj = {
          userName: query,
          openId: this.token
        }
        clientService.getUser(obj).then(json => {
          let res = json.result
          this.loadingAssign = false;
          if (!json.error) {
            console.log(json, res)
            this.listAssign = res.userList || []
          } else {
            // Toast.fail(json.error.msg);
            if (json.error.code == 1104 ||json.error.code == 99991677) {
              storage.setItem(CONFIG.TOKEN, '');
              this.$router.replace({ name: 'Auth' })
            }
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    showPreview(url) {
      this.icons = url;
      this.showImg = true;
     // window.open(this.icons)
    //  window.location.href=this.icons
    },

  },
  //一个对象，键是需要观察的表达式，值是对应回调函数
  watch: {},
};
</script>


<style scoped lang="less">
@import './cop.less';
</style>
